<template>
	<div class="productSell index-container  ec-container">
    <el-row :gutter="10" class="form">
      <el-col :span="6">
        <div class="grid-content  ">
          <span>消费渠道：</span>
          <el-input class="w60 h40" v-model="fileter.chnennelCode" clearable  placeholder="请输入消费渠道"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ">
          <span>消费平台：</span>
          <el-input class="w60 h40" v-model="fileter.platformName" clearable placeholder="请输入消费平台"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ">
          <span>消费店铺：</span>
          <el-input class="w60 h40" v-model="fileter.storeName" clearable placeholder="请输入消费店铺"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ">
          <span>省份：</span>
          <el-input class="w60 h40" v-model="fileter.provinceName" clearable placeholder="请输入省份"></el-input>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class=" form">
      <el-col :span="6">
        <div class="grid-content ">
          <span>城市：</span>
          <el-input class="w60 h40" v-model="fileter.cityName" clearable placeholder="请输入城市"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ">
          <span>品类名称：</span>
          <el-input class="w60 h40" v-model="fileter.categoryName" clearable placeholder="请输入品类名称"></el-input>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="grid-content ">
          <el-button icon="el-icon-search" type="primary" @click="findAll()" size="small"
          >搜索</el-button>
          <el-button size="small" @click="resetForm">重置</el-button>
        </div>
      </el-col>
    </el-row>
		<el-row :gutter="10">
			<el-col :span="24">
				<div id="topKind" class="grid-content"></div>
			</el-col>
		</el-row>
		<el-row :gutter="10">
			<el-col :span="24">
				<div class="grid-content">
					<p class="title">销售商品明细</p>
					<el-table border :data="tableData" :span-method="arraySpanMethod" style="width:100%">
						<el-table-column prop="formatSaleDate" label="付款日" width="150"></el-table-column>
						<el-table-column prop="storeCode" label="消费店号" width="150"></el-table-column>
						<el-table-column prop="cityName" label="消费店地点" width="150"></el-table-column>
<!--						<el-table-column prop="goodsId" label="商品ID" width="150"></el-table-column>-->
<!--						<el-table-column prop="goodsName" label="商品名称" width="200"></el-table-column>-->
						<el-table-column prop="customerQuantity" label="客户数" width="200"></el-table-column>
						<el-table-column prop="totalOrderQuantity" label="订单数"></el-table-column>
						<el-table-column prop="totalSaleAmount" label="销售额"></el-table-column>
						<el-table-column prop="productQuantity" label="商品数量"></el-table-column>
						<el-table-column prop="discountRate" label="折扣率"></el-table-column>
						<el-table-column prop="customersUnitPrice" label="客单价"></el-table-column>
						<el-table-column prop="relatedRate" label="连带率"></el-table-column>
						<el-table-column prop="avgConsume" label="人均消费"></el-table-column>
						<el-table-column prop="onePiecesUnitPrice" label="件单价"></el-table-column>
					</el-table>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
export default {
	name: 'quantity',

	components: {},

	data() {
		return {
      fileter:{
        storeName:null,
        platformName:null,
        chnennelCode:null,
        provinceName:null,
        cityName:null,
        categoryName:null,
      },
      spanArr:[],
      pos:0,
      tableData: [],
			chartData: [],
		}
	},

	methods: {
    //记录需要合并的单元格
    getSpanArr(data) {
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].formatSaleDate == data[i - 1].formatSaleDate) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
        console.log(this.spanArr)
      }
    },
		// 热销TOP10
		getChartList() {
			let this_ = this
			this.utils.request.getSaleCategoryDetail(this.fileter, res => {
				if (res.data) {
					this_.chartData = res.data
				} else {
					this_.chartData = []
				}
				this.Kinds(this.chartData)
			})
		},

		// 销售明细
		getSalesDetails() {
			let this_ = this
			this.utils.request.getSalesDetails(this.fileter, res => {
				if (res.data) {
				  this_.getSpanArr(res.data);
					this_.tableData = res.data
				} else {
					this_.tableData = []
				}
			})
		},

		// 获取热销商品top10
		Kinds(val) {
			let topKind = document.getElementById('topKind')
			let kindWrap = this.$echarts.init(topKind)
			let option = {
				title: {
					text: '热销品类TOP10'
				},
				legend: {
					textStyle: {
						fontSize: 16
					},
					itemWidth: 40,
					itemHeight: 20
				},
				xAxis: {
					data: val.x,
					axisLabel: {
						textStyle: {
							fontSize: 14
						}
					}
				},
				yAxis: [
					{
						min: 0,
						max: 200,
						interval: 50,
						name: '销售额',
						splitLine: {show: false},
						axisLabel: {
							formatter: '{value} 万'
						}
					}
				],
				series: [
					{
						name: '销售额',
						type: 'bar',
						color: '#1ea084',
						barWidth: '25%',
						data: val.y1,
						itemStyle: {
							normal: {
								label: {
									show: true,
									position: 'top',
									textStyle: {
										fontSize: 16
									}
								}
							}
						}
					}
				]
			}
			kindWrap.setOption(option)
		},
    // 处理单元格合并
    arraySpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        }
      }
    },
    //重置
    resetForm:function () {
      this.fileter={
        storeName:null,
        platformName:null,
        chnennelCode:null,
        provinceName:null,
        cityName:null,
        categoryName:null,
      }
      this.getChartList()
      this.getSalesDetails()
    },

    //查询
    findAll:function () {
      this.getChartList()
      this.getSalesDetails()
    }
	},

	mounted() {
		this.getChartList()
		this.getSalesDetails()
	}
}
</script>

<style lang="scss" scoped>
 @import "../../../../assets/css/dataCenterEcharts.css";

	.productSell {
		.activeKind {
			height: 500px;
			padding: 20px;
		}

		.hotTable {
			height: 500px;
			padding: 10px;

			p {
				text-align: left;
				padding-left: 20px;
				font-size: 20px;
				font-weight: 600;
			}
		}
	}

	.mg15 {
		margin-bottom: 15px;
	}

	.form /deep/ .el-col .grid-content .el-select {
		width: 150px;
	}

	.form {
		.el-date-editor {
			width: 120px;
		}
	}
</style>

